<template>
    <div class="banners">
        <el-form-item label="背景图片" prop="imageId" :rules="rules1">
            <upload-file :picnum="picnum" @remove="removePic" @success="uploadSuccess" :limit="piclimit">
            </upload-file>
        </el-form-item>
        <p class="upload_text">仅可上传一个文件（视频/音频），视频仅支持MP4，音频仅支持MP3，音/视频大小不得超过2G.</p>
        <template>
            <div v-for="(itemForm,idx) in editableFrom" :key="idx" :class="idx != 0 ? 'form_border':''">
                <p v-if="idx !== 0" style="margin: 10px 0 22px 72px;">内容{{idx}}</p>
                <el-form-item label="标题" :label-width="idx != 0 ? '70px':'100px'">
                    <el-input v-model="itemForm.biaoti"></el-input>
                </el-form-item>
                <el-form-item label="内容" :label-width="idx != 0 ? '70px':'100px'" style="position: relative;">
                    <el-input type="textarea" v-model="itemForm.content" class="textarea"></el-input>
                    <el-button v-if="idx == 0" @click="addForm(idx)" class="add">增加</el-button>
                </el-form-item>
            </div>
        </template>
    </div>
</template>
<script>
/**
* description: 楼宇说明模块
*/
import uploadFile from '../upload/upload.vue'
export default {
    components: {
        uploadFile,
    },
    data() {
        return {
            piclimit: 5,
            picnum: 0, //一个页面可能会有几个upload组件，需要编号
            piccontent: [],
            editableFrom: [{ biaoti: '', content: '' }],
            rules1: [
                { required: true, message: '内容不能为空' },
                { type: 'string', message: '' }
            ],
        }
    },
    methods: {
        removePic(picnum, file, fileList) {
            this.uploadForm.forEach((item) => {
                item.picnum === picnum ? item.piccontent = fileList : ''
            })
        },
        uploadSuccess(picnum, file, fileList) {
            this.uploadForm.forEach((item) => {
                item.picnum === picnum ? item.piccontent = fileList : ''
            })
        },
        submit() {
            // todo 提交数据给后端
        },
        addForm(id) {
            this.editableFrom.push({
                biaoti: '',
                content: '',
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.upload_text {
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: #999999;
    line-height: 16px;
    margin: -8px 0 28px 54px;

}

.form_border {
    width: 674px;
    border: 1px dotted #CBCED4;
    margin: 18px 87px 10px 28px;
}

.add {
    width: 60px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #00B3A8;
    margin-left: 20px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #00B3A8;
    position: absolute;
    bottom: 0;
    position: absolute;
    bottom: 0;
}

.add:hover {
    background-color: none;
}
</style>